import React, { useState, useEffect } from 'react'
import { StyleSheet, SafeAreaView, View, ScrollView, FlatList, TouchableOpacity } from 'react-native'
import { Divider, Icon, Card, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';

export const ServiceScreen = (props) => {
    const { navigation, route } = props

    const { device } = route.params
    const [services, setServices] = useState([])

    onPressService = (service) => {
        navigation.push('Characteristic', { service })
    }

    useEffect(() => {
        device.services()
            .then(service => {
                console.log(`服务:${service}`)
                setServices(prev => [...prev, ...service])
                console.log(`sevice len ${services.length}`)
            })

    },[device])

    const navigateBack = () => {
        navigation.goBack();
    };

    const BackIcon = (props) => (
        <Icon {...props} name='arrow-back' />
    );

    const BackAction = () => (
        <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
    );

    onPressService = (service) => {
        navigation.push('Characteristic', { service })
    }

    renderItem = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => onPressService(item)}>
                <View style={styles.item}>
                    <Text style={styles.title}>UUID: ${item.uuid}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    return (
        <SafeAreaView style={styles.fill}>
            <TopNavigation title='设备服务' alignment='center' accessoryLeft={BackAction} />
            <Divider />
            <Card style={{ paddingVertical: 10 }}>
                <Text style={styles.label}>设备 ID:</Text>
                <Text style={styles.value}>{device.id}</Text>
                <Text style={styles.label}>设备名称:</Text>
                <Text style={styles.value}>{device.localName || device.name || '无'}</Text>
            </Card>
            <View style={styles.listHeader}>
                <Text style={styles.headerTitle}>服务列表</Text>
            </View>
            <ScrollView style={styles.fill}>
                <FlatList
                    style={styles.list}
                    ListEmptyComponent={() => <Text style={styles.placeholder}>暂无数据</Text>}
                    data={services}
                    ItemSeparatorComponent={() => <View style={styles.border} />}
                    keyExtractor={(item, index) => '' + index}
                    renderItem={renderItem}
                />
            </ScrollView>
        </SafeAreaView >
    )
}

const styles = StyleSheet.create({
    fill: {
        flex: 1
    },
    label: {
        fontWeight: '500',
        fontSize: 16,
    },
    value: {
        marginTop: 8,
        marginBottom: 10,
        color: '#666'
    },
    listHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#f5f5f9',
        padding: 15
    },
    headerTitle: {
        fontSize: 15,
        fontWeight: '500'
    },
    
    border: {
        backgroundColor: '#d9d9d9',
        height: 0.5
    },
})